<template>
  <div class="clcy">
    <Card noTitle>
      <div slot="cRight">
        <el-form inline size="small">
          <el-form-item label="">
            <el-input></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <Table :tableData="tableData" @btnClick="handleClick" selection></Table>
      <Pagination :total="tableData.row.length"></Pagination>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Card,
    Table,
    Pagination
  },

  data() {
    return {
      dialogVisible: false,
      dialogVisibleA: false,
      selectPer: false,
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '产品名称'
          },
          {
            prop: 'colC',
            label: '状态'
          },
          {
            prop: 'colE',
            label: '操作',
            type: 'Button',
            btnList: [
              {
                label: '流程图',
                isShow: () => {
                  return true
                }
              },
              {
                label: '发布',
                isShow: val => {
                  return val.colC !== '待发布'
                }
              },
              {
                label: '下架',
                isShow: val => {
                  return val.colC !== '已发布'
                }
              },
              {
                label: '审批',
                isShow: val => {
                  return val.colC !== '待审批'
                }
              }
            ]
          }
        ],
        row: [
          {
            colA: 'BM52123578',
            colB: 'V网专线',
            colC: '待审批'
          },
          {
            colA: 'BM52123577',
            colB: '千里眼一',
            colC: '已发布'
          },
          {
            colA: 'BM52123576',
            colB: '千里眼二',
            colC: '待审批'
          }
        ]
      }
    }
  },

  methods: {
    handleClick(index, val, btn) {
      if (index === 0) this.dialogVisibleA = true
      if (index === 1 || index === 2 || index === 3) {
        if (val.row.colC === '待发布') {
          this.$confirm('是否下发产商品规格？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
            this.$message({
              message: `${btn.label}成功！`,
              type: 'success'
            })
            val.row.colC = '已发布'
          })
        } else if (val.row.colC === '已发布') {
          val.row.colC = '待发布'
          this.$message({
            message: `${btn.label}成功！`,
            type: 'success'
          })
        } else if (val.row.colC === '待审批') {
          this.$confirm('是否通过？', '提示', {
            confirmButtonText: '通过',
            cancelButtonText: '驳回'
          }).then(() => {
            val.row.colC = '待发布'
            this.$message({
              message: `${btn.label}成功！`,
              type: 'success'
            })
          })
        }
      }
    },
    addTableData() {
      this.tableData.row.push({
        colA: '3860',
        colB: '千里眼专线一',
        colC: '待审批',
        colD: '2020-11-08'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0 !important;
}
/deep/.el-dialog__body {
  height: 62vh;
}
</style>
